<template>
  <div>
    <myheader></myheader>
    <br><br>
    <!-- 面包屑导航 -->
    <Breadcrumb :datas='datas'></Breadcrumb>
    <section class="featured-block text-center">
      <div class="container">

        <table style="width: 800px; text-align: left;">

          <tr>
            <td style="padding: 5px; width: 100px;">
              商品名称：
            </td>
            <td style="padding: 5px; width: 700px;">
              <input type="text" v-model='name'>
            </td>
          </tr>

          <tr>
            <td style="padding: 5px;">
              商品价格：
            </td>
            <td style="padding: 5px;">
              <input type="text" v-model='price'>
            </td>
          </tr>

          <tr>
            <td style="padding: 5px;">
              商品分类：
            </td>
            <td style="padding: 5px;">
              <Select v-model="cate" :datas="cates" placeholder='请选择' style="width: 178.33px;"></Select>
            </td>
          </tr>

          <tr>
            <td style="padding: 5px;">
              商品参数：
            </td>
            <td style="padding: 5px;">
            </td>
          </tr>

          <tr>
            <td style="padding: 5px;">
            </td>
            <td style="padding: 5px;">
              颜色：
              <Radio v-model="color" :datas="colors"></Radio>
            </td>
          </tr>

          <tr>
            <td style="padding: 5px;">
            </td>
            <td style="padding: 5px;">
              尺寸：
              <Radio v-model="size" :datas="siz"></Radio>
            </td>
          </tr>

          <tr>
            <td style="padding: 5px;">
              商品简介：
            </td>
            <td style="padding: 5px;">
              <textarea v-model="desc"></textarea>
            </td>
          </tr>

          <tr>
            <td style="cursor:pointer;padding: 5px;">商品图片上传:</td>
            <td><input type="file" @change="qiniu_img"></td>
          </tr>

          <tr>
            <td style="padding: 5px;">
              商品微视频上传：
            </td>
            <td style="padding: 5px; width: 70px; height: 10px;">
              <input type="file" @change='qiniu_video'><br>
              <p>
                <Progress v-show="filePercent_int" :percent="filePercent_int" color="pink"><span slot="text">{{ filePercent_int }}%</span>
                </Progress>
              </p>
            </td>
          </tr>

          <tr>
            <td style="padding: 5px;">

            </td>
            <td style="padding: 5px;">
              <Button color='blue' @click='submit'>添加商品</Button>
              <Button color='yellow' @click='reset'>重置</Button>
            </td>
          </tr>


        </table>


      </div>
    </section>
    <myfooter></myfooter>

  </div>
</template>


<script>
  import myheader from './myheader.vue';
  import myfooter from './myfooter.vue';
  import axios from 'axios'
  import {config} from '../config.js'


  export default {
    data() {
      return {
        datas: [{title: '首页', route: {name: 'index'}}, {title: '添加商品'}],
        uptoken: '',
        cates: [],
        colors: ['玫瑰金', '土豪金', '星空蓝', '魅夜黑'],
        siz: ['64G', '128G', '256G', '512G'],
        name: '',
        price: '',
        desc: '',
        cate: '',
        color: '',
        size: '',
        cate: '',
        imgname: '',
        videoname: '',
        pars: '',
        filePercent: 0,
        filePercent_int: 0,

      }
    },
    //注册组件标签
    components: {
      'myheader': myheader,
      'myfooter': myfooter,
    },
    methods: {
      //获取分类信息
      get_cate() {
        axios.get(config['djurl'] + 'cateinfo/').then(res => {
          let mylist = res.data
          let catelist = []
          for (let i = 0, l = mylist.length; i < l; i++) {
            catelist.push(mylist[i]['name'])
          }
          this.cates = catelist;
        })
      },
      //获取七牛云上传凭证
      get_uptoken() {
        axios.get(config['djurl'] + 'uptoken/').then(res => {
          this.uptoken = res.data.token;
        })
      },
      //上传七牛图片
      qiniu_img(e) {
        //获取文件对象
        let file = e.target.files[0];
        //声明参数
        let param = new FormData();
        //添加上传凭证，添加文件参数
        param.append('token', this.uptoken);
        param.append('file', file);
        //定制化axios
        const axios_qiniu = axios.create({widthCredentials: false})
        //发送请求
        axios_qiniu({
          method: 'POST',
          url: 'http://up-z1.qiniu.com/',
          data: param,
          timeout: 30000,
        }).then(res => {
          this.imgname = res.data.key;
        })

      },
      //上传七牛视频
      qiniu_video(e) {

        //获取文件对象
        let file = e.target.files[0];
        //声明参数
        let param = new FormData();
        //添加上传凭证的参数
        param.append('token', this.uptoken);
        //添加上传文件的参数
        param.append('file', file);

        //定制化axios
        const axios_qiniu = this.axios.create({widthCredentials: false});
        //发送请求
        axios_qiniu({
          method: 'POST',
          url: 'http://up-z1.qiniu.com/',
          data: param,
          timeout: 60000,
          //设置上传进度
          onUploadProgress: (e) => {
            //设置总进度对象 已上传字节数、总字节数
            var complete = (e.loaded / e.total);
            //安慰剂按钮
            if (complete < 1) {
              this.filePercent = (complete * 100).toFixed(2) + "%";
              this.filePercent_int = parseInt((complete * 100).toFixed(2))
            }
          }
        }).then(res => {
          console.log(res)
          this.filePercent = '100%';
          this.filePercent_int = 100;
          this.videoname = res.data.key;
        })

      },
      //提交添加商品
      submit() {
        //拼接商品规格
        let par = {};
        par['color'] = this.color;
        par['size'] = this.size;
        this.pars = JSON.stringify(par);

        let data = new FormData();
        data.append('name', this.name)
        data.append('desc', this.desc)
        data.append('price', this.price)
        data.append('cate', this.cate)
        data.append('img', this.imgname)
        data.append('video', this.videoname)
        data.append('pars', this.pars)
        // //格式化字符串
        // parms = JSON.stringify(parms);

        // //从字符串转回dict
        //  parms = JSON.parse(parms);
        // 发送请求
        axios.post(config['djurl'] + 'addgoods/', data).then(res => {
          this.$Message(res.data.message)
        })
      },
      reset() {

      }
    },
    mounted() {
      this.get_cate();
      this.get_uptoken();
    },
  }

</script>
